<template>
  <div class="water_control_update">
    <!-- 信息弹窗 -->
    <el-dialog
      width="500px"
      custom-class="customWidth"
      center
      :before-close="closeDialog"
      title="水控信息"
      :close-on-click-modal="false"
      :visible.sync="eidtDialogFormVisible"
      style="paddingleft:60px;"
    >
      <el-form
        :model="editdataForm"
        :rules="eidtataRule"
        ref="editdataForm"
        @keyup.enter.native="addataFormSubmit()"
        label-width="140px"
        :disabled="!isauth('water_edit')"
      >
        <el-form-item label="设备名称" prop="terminalName">
          <el-col :span="15">
            <el-input v-model="editdataForm.terminalName" size="mini" disabled></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="设备编号" prop="terminalCode">
          <el-col :span="15">
            <el-input v-model="editdataForm.terminalCode" size="mini" disabled></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="设备型号" prop="devicemodel">
          <el-col :span="15">
            <el-select
              v-model="editdataForm.devicemodel"
              placeholder="请选择"
              style="width:100%"
              size="mini"
              disabled
            >
              <el-option
                v-for="item in terminaloption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="做中继时的编号" prop="repeaterWaterCode">
          <el-col :span="15">
            <el-input v-model.number="editdataForm.repeaterWaterCode" show-word-limit size="mini"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="是否启用">
          <el-col :span="15">
            <el-checkbox v-model="editdataForm.deviceisuse"></el-checkbox>
          </el-col>
        </el-form-item>
        <el-form-item label="设备白名单下发范围" prop="nameRange">
          <el-col :span="15">
            <el-select
              v-model="editdataForm.nameRange"
              placeholder="请选择"
              style="width:100%"
              size="mini"
            >
              <el-option
                v-for="item in nameRangeoption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-col>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer" v-if="isauth('water_edit')">
        <el-button @click="editvisible()">取消</el-button>
        <el-button type="primary" @click="editdataFormSubmit()">确定</el-button>
      </span>
    </el-dialog>
    <!-- 中继修改弹窗 -->
    <el-dialog
      width="500px"
      custom-class="customWidth"
      center
      :before-close="repeatercloseDialog"
      title="修改路由信息"
      :close-on-click-modal="false"
      :visible.sync="repeaterDialogFormVisible"
    >
      <el-form
        :model="repeaterdataForm"
        :rules="repeaterdataFormRule"
        ref="repeaterdataForm"
        label-width="100px"
        :disabled="!isauth('water_edit')"
      >
        <el-form-item label="第一跳中继" prop="repeater1">
          <el-col :span="15">
            <el-select
              v-model="repeaterdataForm.repeater1"
              placeholder="请选择"
              style="width:100%"
              size="mini"
              clearable
              @change="repeaterslect"
            >
              <el-option
                v-for="item in repeateroption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="第二跳中继" prop="repeater2">
          <el-col :span="15">
            <el-select
              v-model="repeaterdataForm.repeater2"
              placeholder="请选择"
              style="width:100%"
              size="mini"
              clearable
              @change="repeaterslect2"
            >
              <el-option
                v-for="item in repeateroption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="第三跳中继" prop="repeater3">
          <el-col :span="15">
            <el-select
              v-model="repeaterdataForm.repeater3"
              placeholder="请选择"
              style="width:100%"
              size="mini"
              clearable
              @change="repeaterslect3"
            >
              <el-option
                v-for="item in repeateroption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="第四跳中继" prop="repeater4">
          <el-col :span="15">
            <el-select
              v-model="repeaterdataForm.repeater4"
              placeholder="请选择"
              style="width:100%"
              size="mini"
              clearable
              @change="repeaterslect4"
            >
              <el-option
                v-for="item in repeateroption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-col>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer" v-if="isauth('water_edit')">
        <el-button @click="repeatervisible()">取消</el-button>
        <el-button type="primary" @click="repeaterdataFormSubmit()">确定</el-button>
      </span>
    </el-dialog>
    <!-- 参数模板修改弹窗 -->
    <el-dialog
      width="500px"
      custom-class="customWidth"
      center
      :before-close="parametercloseDialog"
      title="修改参数模板"
      :close-on-click-modal="false"
      :visible.sync="parameterDialogFormVisible"
    >
      <el-form
        :model="parameterdataForm"
        :rules="parameterRule"
        ref="parameterdataForm"
        label-width="80px"
        :disabled="!isauth('water_edit')"
      >
        <el-form-item label="模板" prop="template">
          <el-col :span="15">
            <el-select
              v-model="parameterdataForm.template"
              placeholder="请选择"
              style="width:100%"
              size="mini"
            >
              <el-option
                v-for="item in templateoption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-col>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer" v-if="isauth('water_edit')">
        <el-button @click="parametervisible()">取消</el-button>
        <el-button type="primary" @click="parameterdataFormSubmit()">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    let checkPhone = (rule, value, callback) => {
      if (!value) {
        // 通过callback传递错误信息
        callback()
      } else {
        if (/\d{1,2}/.test(value)) {
          if (value < 0 || value > 63) {
            callback(new Error('编号需为0-63'))
          } else {
            // 没有错误了就直接调用callback
            callback()
          }
        } else {
          callback(new Error('编号需为0-63'))
        }
      }
    }
    return {
      eidtDialogFormVisible: false,
      repeaterDialogFormVisible: false,
      parameterDialogFormVisible: false,
      terminaloption: [],
      buildingGuid: '',
      unitGuid: '',
      // 设备白名单下发范围 1全部 2楼栋 3楼层 4房间
      nameRangeoption: [
        { label: '全部', value: 1 },
        { label: '楼栋', value: 2 },
        { label: '楼层', value: 3 },
        { label: '房间', value: 4 }
      ],
      editdataForm: {
        terminalCode: '',
        terminalName: '',
        devicemodel: '',
        deviceisuse: false,
        terminalGuid: '',
        repeaterWaterCode: '',
        nameRange: ''
      },
      eidtataRule: {
        repeaterWaterCode: [{ validator: checkPhone, trigger: 'blur' }]
      },

      //中继
      repeateroption: [],
      repeaterdataForm: {
        repeater1: '',
        repeater2: '',
        repeater3: '',
        repeater4: '',
        controllerGuid: ''
      },
      repeaterdataFormRule: {},

      //模板
      parameterdataForm: {
        template: ''
      },
      templateoption: [],
      parameterRule: {},
      roomGuidList: []
    }
  },
  props: ['buttonindex'],
  watch: {},
  methods: {
    editvisible() {
      this.eidtDialogFormVisible = false
    },
    init(item, unitGuid) {
      this.eidtDialogFormVisible = true
      this.unitGuid = unitGuid
      this.editdataForm.terminalCode = item.terminalCode
      this.editdataForm.terminalName = item.terminalName
      this.editdataForm.terminalGuid = item.terminalGuid
      this.editdataForm.devicemodel = item.modelId
      this.editdataForm.deviceisuse = item.isUse == 1 ? true : false
      this.editdataForm.repeaterWaterCode = item.repeaterWaterCode
      this.nameRangeoption = [
        { label: item.allRange, value: 0 },
        { label: '全部', value: 1 },
        { label: '楼栋', value: 2 },
        { label: '楼层', value: 3 },
        { label: '房间', value: 4 },
      ];
      this.$nextTick(() => {
        // 设备白名单下发范围
        this.editdataForm.nameRange = item.nameRange
      })

      this.terminalselect()
    },
    closeDialog(done) {
      this.$refs['editdataForm'].resetFields()
      done()
    },
    //设备型号选项
    terminalselect() {
      this.terminaloption = []
      this.$http({
        url: this.$http.adornUrl('/terminal/terminal-model-select'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            terminalType: 6,
            unitGuid: this.unitGuid
          },
          messageType: 0
        })
      }).then(({ data }) => {
        console.log(data)
        if (data.messageCode == 200) {
          let Arr = data.messageContent
          if (this.terminaloption.length == 0) {
            for (var i = 0; i < Arr.length; i++) {
              var itemObj = {
                label: Arr[i].modelName,
                value: Arr[i].modelId
              }
              this.terminaloption.push(itemObj)
            }
          }
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },
    //修改设备型号
    editdataFormSubmit() {
      this.$refs['editdataForm'].validate(valid => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl('/area/room/update-room-terminal-model'),
            method: 'post',
            data: this.$http.adornData({
              messageContent: {
                isUse: this.editdataForm.deviceisuse == true ? 1 : 0,
                unitGuid: this.unitGuid,
                terminalModel: this.editdataForm.devicemodel,
                terminalGuid: this.editdataForm.terminalGuid,
                repeaterWaterCode: parseInt(this.editdataForm.repeaterWaterCode),
                nameRange:this.editdataForm.nameRange,
              },
              messageType: 0
            })
          }).then(({ data }) => {
            console.log(data)
            if (data.messageCode == 200) {
              this.$message({
                type: 'success',
                message: '修改成功!',
                duration: 200,
                onClose: () => {
                  this.$emit('refreshDataList', this.buttonindex + 1)
                  this.eidtDialogFormVisible = false
                }
              })
            } else {
              this.$message.error(data.errorMessage)
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    //修改中继
    relayinit(item, unitGuid, buildingid) {
      this.roomGuidList = []
      console.log(item)
      this.roomGuidList.push(item.roomGuid)
      this.buildingGuid = buildingid
      this.repeaterdataForm.controllerGuid = item.controllerGuid
      this.unitGuid = unitGuid
      this.repeaterdataForm.terminalGuid = item.terminalGuid
      this.repeaterdataForm.repeater1 = item.repeaterGuid1
      this.repeaterdataForm.repeater2 = item.repeaterGuid2
      this.repeaterdataForm.repeater3 = item.repeaterGuid3
      this.repeaterdataForm.repeater4 = item.repeaterGuid4
      this.repeaterlist()
      this.repeaterDialogFormVisible = true
    },
    repeatercloseDialog(done) {
      this.$refs['repeaterdataForm'].resetFields()
      done()
    },
    repeatervisible() {
      this.$refs['repeaterdataForm'].resetFields()
      this.repeaterDialogFormVisible = false
    },
    repeaterdataFormSubmit() {
      this.$http({
        url: this.$http.adornUrl('/terminal/bind-terminal-room-repeater'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            repeater1: this.repeaterdataForm.repeater1,
            repeater2: this.repeaterdataForm.repeater2,
            repeater3: this.repeaterdataForm.repeater3,
            repeater4: this.repeaterdataForm.repeater4,
            roomGuidList: this.roomGuidList,
            terminalType: 6
          },
          messageType: 0
        })
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          this.$message({
            type: 'success',
            message: '修改成功!',
            duration: 200,
            onClose: () => {
              this.$emit('refreshDataList', this.buttonindex + 1)
              this.repeaterDialogFormVisible = false
            }
          })
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },
    repeaterlist() {
      this.repeateroption = []
      this.$http({
        url: this.$http.adornUrl('/terminal/terminal-repeater-list'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            buildingGuid: this.buildingGuid,
            controllerGuid: this.repeaterdataForm.controllerGuid,
            terminalGuid: this.repeaterdataForm.terminalGuid,
            unitGuid: this.unitGuid
          },
          messageType: 0
        })
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          let Arr = data.messageContent
          if (Arr) {
            for (var i = 0; i < Arr.length; i++) {
              var itemObj = {
                label: Arr[i].terminalName,
                value: Arr[i].terminalGuid
              }
              this.repeateroption.push(itemObj)
            }
          }
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },
    repeaterslect() {
      if (this.repeaterdataForm.repeater1 == this.repeaterdataForm.repeater2) {
        this.$message({
          message: '当前选择与第二心跳中继冲突',
          type: 'warning'
        })
        this.repeaterdataForm.repeater1 = ''
        return
      }
      if (this.repeaterdataForm.repeater1 == this.repeaterdataForm.repeater3) {
        this.$message({
          message: '当前选择与第三心跳中继冲突',
          type: 'warning'
        })
        this.repeaterdataForm.repeater1 = ''
        return
      }
      if (this.repeaterdataForm.repeater1 == this.repeaterdataForm.repeater4) {
        this.$message({
          message: '当前选择与第四心跳中继冲突',
          type: 'warning'
        })
        this.repeaterdataForm.repeater1 = ''
        return
      }
    },
    repeaterslect2() {
      if (this.repeaterdataForm.repeater2 == this.repeaterdataForm.repeater1) {
        this.$message({
          message: '当前选择与第一心跳中继冲突',
          type: 'warning'
        })
        this.repeaterdataForm.repeater2 = ''
        return
      }
      if (this.repeaterdataForm.repeater2 == this.repeaterdataForm.repeater3) {
        this.$message({
          message: '当前选择与第三心跳中继冲突',
          type: 'warning'
        })
        this.repeaterdataForm.repeater2 = ''
        return
      }
      if (this.repeaterdataForm.repeater2 == this.repeaterdataForm.repeater4) {
        this.$message({
          message: '当前选择与第四心跳中继冲突',
          type: 'warning'
        })
        this.repeaterdataForm.repeater2 = ''
        return
      }
    },
    repeaterslect3() {
      if (this.repeaterdataForm.repeater3 == this.repeaterdataForm.repeater1) {
        this.$message({
          message: '当前选择与第一心跳中继冲突',
          type: 'warning'
        })
        this.repeaterdataForm.repeater3 = ''
        return
      }
      if (this.repeaterdataForm.repeater3 == this.repeaterdataForm.repeater2) {
        this.$message({
          message: '当前选择与第二心跳中继冲突',
          type: 'warning'
        })
        this.repeaterdataForm.repeater3 = ''
        return
      }
      if (this.repeaterdataForm.repeater3 == this.repeaterdataForm.repeater4) {
        this.$message({
          message: '当前选择与第四心跳中继冲突',
          type: 'warning'
        })
        this.repeaterdataForm.repeater3 = ''
        return
      }
    },
    repeaterslect4() {
      if (this.repeaterdataForm.repeater4 == this.repeaterdataForm.repeater1) {
        this.$message({
          message: '当前选择与第一心跳中继冲突',
          type: 'warning'
        })
        this.repeaterdataForm.repeater4 = ''
        return
      }
      if (this.repeaterdataForm.repeater4 == this.repeaterdataForm.repeater2) {
        this.$message({
          message: '当前选择与第二心跳中继冲突',
          type: 'warning'
        })
        this.repeaterdataForm.repeater4 = ''
        return
      }
      if (this.repeaterdataForm.repeater4 == this.repeaterdataForm.repeater3) {
        this.$message({
          message: '当前选择与第三心跳中继冲突',
          type: 'warning'
        })
        this.repeaterdataForm.repeater4 = ''
        return
      }
    },
    //参数模板修改
    parameterinit(item, unitGuid) {
      this.roomGuidList = []
      console.log(item)
      this.roomGuidList.push(item.roomGuid)
      this.unitGuid = unitGuid
      this.parameterdataForm.template = item.templateGuid
      this.terminaltemplate()
      this.parameterDialogFormVisible = true
    },
    parametercloseDialog(done) {
      this.$refs['parameterdataForm'].resetFields()
      done()
    },
    parametervisible() {
      this.$refs['parameterdataForm'].resetFields()
      this.parameterDialogFormVisible = false
    },
    //获取设备模板
    terminaltemplate() {
      this.$http({
        url: this.$http.adornUrl('/terminal/template-model-select'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            terminalType: 6,
            unitGuid: this.unitGuid
          },
          messageType: 0
        })
      }).then(({ data }) => {
        console.log(data)
        if (data.messageCode == 200) {
          let Arr = data.messageContent
          if (this.templateoption.length == 0) {
            for (var i = 0; i < Arr.length; i++) {
              var itemObj = {
                label: Arr[i].templateName,
                value: Arr[i].templateGuid
              }
              this.templateoption.push(itemObj)
            }
          }
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },
    //修改房间参数模板
    parameterdataFormSubmit() {
      this.$http({
        url: this.$http.adornUrl('/terminal/room-terminal-template-update'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            roomGuidList: this.roomGuidList,
            unitGuid: this.unitGuid,
            templateGuid: this.parameterdataForm.template,
            terminalType: 6
          },
          messageType: 0
        })
      }).then(({ data }) => {
        console.log(data)
        if (data.messageCode == 200) {
          this.$message({
            type: 'success',
            message: '修改成功!',
            duration: 200,
            onClose: () => {
              this.$emit('refreshDataList', this.buttonindex + 1)
              this.parameterDialogFormVisible = false
            }
          })
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-dialog--center .el-dialog__body {
  padding-left: 60px;
}
</style>
